<template>
  <view class="header-box">
    <view v-if="equimentList!=''">
         <block v-for="(item,index) in equimentList" :key="index">
           <view class="card-item">
             <view class="item-content border-bottom">
               <view class="left-box">
                 <image :src="item.activationStatus === 0?'https://mkservice.mk-iot.com/subFile/mkApplet/report.png':'https://mkservice.mk-iot.com/subFile/mkApplet/setmaintenance.png'"
                   mode="aspectFill"></image>
               </view>
               <view class="right-box">
                 <view class="floor">{{item.equipmentNo}}
                   <view class="level-tag"
                     :style="item.activationStatus === 0?'background-color:#07c160' : 'background-color:#ee0a24'">
                     {{item.activationStatus === 0?'已激活':'未激活'}}
                   </view>
                 </view>
                 <text class="date">{{item.dateOfManufacture}}</text>
                 <text class="desc">{{item.equipmentType === 0?'成品':'半成品'}}</text>
                 <view class="item-footer">
                   <text class="delrepair" @tap="cancelBind(item.equipmentNo)">取消绑定</text>
                  <!-- <text class="queryitem" @tap="navDetail(item.equipmentNo)">查看详情</text> -->
                 </view>
               </view>
             </view>
           </view>
         </block>
         <view>
           <view class="panel-center item-center ma-t30" style='padding:30rpx;padding-top:0 '>
             <view class='fg1'></view>
             <view class='fg2'>{{equimentList.length>0?"我是有底线的哦":"暂无数据"}}</view>
             <view class='fg1'></view>
           </view>
         </view>
       </view>
    
    <view v-else>
      <view class="warring_top">
        <image src="https://mkservice.mk-iot.com/subFile/mkApplet/warringico.png" class="warringico"></image>
        <view class="warring_text">
          抱歉，您并未绑定任何设备
        </view>
        <view class="goToSendText" @tap="goToBind">
          前往去绑定
        </view>
      </view>
      <button class="warring_btn" @tap="escUp">确定</button>
    </view>
</view>
</template>

<script>
  import {
    myEquipmentToList,
    cancelBindEquipment
  } from "@/api/system/equiment/equipment.js"
  import {
    selectCountByEquipmentCode,
    deleteTaskByEquimentNo
  } from "@/api/system/task/task.js"
  export default {
    data() {
      return {
        // 是否正在请求数据,节流阀
        isloading: false,
        count: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 6,
          customerId: ''
        },
        equimentList: [],
        message: ""
      }
    },
    onLoad(option) {
      this.queryParams.customerId = option.userId
      this.myEquipmentToList()
    },
    methods: {
      myEquipmentToList(cb) {
        // 打开遮罩层
        this.$modal.loading("数据加载中...");
        // ** 打开节流阀
        this.isloading = true
        myEquipmentToList(this.queryParams).then(response => {
          if (response.code === 200) {
            // 关闭遮罩层
            this.$modal.closeLoading();
            uni.stopPullDownRefresh()
            // 关闭节流阀
            this.isloading = false
            // 只要数据请求完毕，就立即按需调用 cb 回调函数
            cb && cb()
            this.equimentList = [...this.equimentList, ...response.rows]
            this.count = response.total
          }
        })
      },
      //去绑定设备页面
      goToBind() {
        uni.showModal({
          cancelColor: 'cancelColor',
          title: "提示",
          content: "请返回设备管理,点击扫码报修即可绑定设备去报修",
          showCancel: false
        })
      },
      //确定跳转设备管理
      escUp() {
        this.$tab.reLaunch('/pages/work/index')
      },
      //取消绑定
      cancelBind(equipmentNo) {
        selectCountByEquipmentCode(equipmentNo).then(response => {
          if (response.code == 200) {
            if (response.data > 0) {
              this.message = "该设备存在报修单你确定取消绑定吗？（确定后将删除该设备的报修单）"
              this.$modal.confirm(this.message).then(() => {
                deleteTaskByEquimentNo(equipmentNo).then(response => {
                  if (response.code === 200) {
                    cancelBindEquipment(equipmentNo).then(response => {
                      if (response.code === 200) {
                        this.empty();
                        this.myEquipmentToList()
                        this.$modal.msgSuccess("操作成功！")
                      }
                    })
                  }
                })
              })
            } else {
              this.message = "确定取消绑定本设备吗？"
              cancelBindEquipment(equipmentNo).then(response => {
                if (response.code === 200) {
                  this.empty();
                  this.myEquipmentToList()
                  this.$modal.msgSuccess("操作成功！")
                }
              })
            }
          }
        })
      },
      empty() {
        //重置关键数据
        this.isloading = false
        this.equimentList = []
        this.queryParams.pageNum = 1
      },
      //查看详细页
      navDetail(equipmentNo) {
        // this.$tab.navigateTo('/pages/maintenance/maintenance_item/maintenance_item?mcode=' + equipmentNo)
      },
    },
    // 触底的事件
    onReachBottom() {
      // 判断是否还有下一页数据
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.count) return uni.$showMsg('数据加载完毕')
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if (this.isloading) return
      //让页码值自增+1
      this.queryParams.pageNum += 1
      // 重新获取列表数据
      this.myEquipmentToList()

    },
    //下拉事件
    onPullDownRefresh() {
      //重置关键数据
      this.queryParams.pageNum = 1
      this.count = 0
      this.isloading = false
      this.equimentList = []

      //重新发起数据请求
      this.myEquipmentToList()
    },
  }
</script>

<style lang="scss">
  .header-box {
    position: sticky;
    top: 0;
    z-index: 2000;

    .warring_top {
      width: 100%;
      padding: 30rpx;
      background-color: #fff;

      .warringico {
        width: 120rpx;
        height: 120rpx;
        margin: 0px auto;
        display: block;
      }

      .warring_text {
        margin: 20px auto;
        text-align: center;
      }

      .goToSendText {
        text-align: center;
        font-size: 25rpx;
        color: #0d91dd;
        font-weight: bold;
      }
    }

    .warring_btn {
      width: 90%;
      background: linear-gradient(to right, #6496F7, #2F6BE3);
      color: #fff;
      margin-top: 50rpx;
    }

    .card-item {
      margin: 20rpx;
      border-radius: 10rpx;
      position: relative;

      .item-content {
        background-color: white;
        display: flex;
        padding: 20rpx;
        position: relative;

        .left-box>image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 10rpx;
          border: 2px solid rgb(209, 209, 209);
        }

        .right-box {
          display: flex;
          flex: 1;
          flex-direction: column;
          margin-left: 20rpx;

          .floor {
            font-weight: bold;
            font-size: 32rpx;

            .level-tag {
              font-size: 23rpx;
              color: white;
              margin-left: 5px;
              padding: 5rpx 12rpx;
              display: inline-block;
              background-color: danger;
              width: 60px;
              text-align: center;
            }
          }

          .desc {
            font-size: 24rpx;
            margin: 5rpx 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .state {
            width: 50px;
            color: #fff;
            font-size: 28rpx;
            margin: 5rpx 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-align: center;
          }

          .pending {
            background-color: #ee0a24
          }

          .processing {
            background-color: #ff976a
          }

          .audit {
            background-color: #07c160;
            width: 100px;
          }

          .audited {
            background-color: #07c160;
            width: 100px;
          }

          .date {
            font-size: 25rpx;
            color: var(--color-text-second);
            margin-top: 5rpx;
          }
        }

        .item-footer {
          font-size: 28rpx;
          padding: 10rpx;
          text-align: right;
        }

        .item-footer>.delrepair {
          margin-left: 20rpx;
          border: 1px solid red;
          padding: 5rpx 10rpx 5rpx 10rpx;
          border-radius: 15rpx;
          color: red;
        }

        .item-footer>.completed {
          margin-left: 20rpx;
          color: rgb(31, 134, 0);
          border: 1px solid rgb(31, 134, 0);
          padding: 5rpx 10rpx 5rpx 10rpx;
          border-radius: 15rpx;
        }

        .item-footer>.evaluateitem {
          margin-left: 20rpx;
          padding: 5rpx 10rpx 5rpx 10rpx;
          border-radius: 15rpx;
        }

        .item-footer>.queryitem {
          margin-left: 20rpx;
          border: 1px solid #1989FA;
          padding: 5rpx 10rpx 5rpx 10rpx;
          border-radius: 15rpx;
        }
      }
    }

    /* 底部 我也是有底线的 */
    .fg1 {
      width: 80rpx;
      border-bottom: 1px solid #aaaaaa;
      vertical-align: middle;
    }

    .fg2 {
      margin: 0 30rpx;
      font-size: 26rpx;
      color: #888;
      vertical-align: middle;
    }

    .panel-center {
      display: flex;
      justify-content: center;
    }

    .panel-center {
      display: flex;
      justify-content: center;
    }

    .ma-t30 {
      margin-top: 30rpx
    }

  }
</style>